<template>
	<view class="poster">
		<view class="mask" @tap="closePosterImage" style="z-index: 13;opacity: 0.8;"></view>
		<view class="poster-box">
			<canvas class="poster-canvas" canvas-id="poster-canvas" >
				<image v-if="loadShow" class="load" src="/static/img/load-more.gif" />
			</canvas>
			<view class="poster-save" @tap="handleSavePoster" v-if="img!=''">保存到相册</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'poster',
		props: {
			poster: {
				type: Object,
				default () {
					return {};
				}
			},
		},
		data:function(){
			return {
				canvas:null,
				img:'',
				loadShow:true
			}
		},
		created:function(e){
			console.log(this.poster);
			this.makeCanvas();
		},
		methods: {
			async makeCanvas(){
				var _this = this;
				_this.canvas = uni.createCanvasContext('poster-canvas', this);
				
				var avatar = function(){
					return new Promise((resolve, reject)=> {
						uni.downloadFile({
							url: _this.poster.avatar,
							success: (res) => {
								_this.canvas.save()// 先保存状态 已便于画完圆再用
								_this.canvas.beginPath() //开始绘制
								_this.canvas.arc(uni.upx2px(70), uni.upx2px(70), uni.upx2px(40), 0, Math.PI * 2); //先画个圆
								_this.canvas.setFillStyle('#ffffff')
								_this.canvas.fill() //保证图片无bug填充
								_this.canvas.clip() //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
								_this.canvas.drawImage(res.tempFilePath, uni.upx2px(30), uni.upx2px(30), uni.upx2px(80), uni.upx2px(80));
								_this.canvas.restore()// 恢复其他画布功能 
								
								resolve()
							},
							fail: (res) => {
								console.log(res);
								uni.hideLoading();
							}
						});	
					});
				}
				var nickname = function(){
					return new Promise((resolve, reject)=> {
						_this.canvas.setFillStyle('#333333');
						_this.canvas.font = '13px Roboto-Regular';
						_this.canvas.setTextAlign('left');
						_this.canvas.fillText(_this.poster.nickname, uni.upx2px(140), uni.upx2px(58)); 
								
						resolve()
					});
				}
				var tip = function(){
					return new Promise((resolve, reject)=> {
						_this.canvas.setFillStyle('#888888');
						_this.canvas.font = '9px Roboto-Regular';
						_this.canvas.setTextAlign('left');
						_this.canvas.fillText(_this.poster.tip, uni.upx2px(140), uni.upx2px(100)); 
								
						resolve()
					});
				}
				var cover = function(){
					return new Promise((resolve, reject)=> {
						uni.downloadFile({
							url: _this.poster.cover,
							success: (res) => {
								_this.canvas.drawImage(res.tempFilePath, uni.upx2px(30), uni.upx2px(150), uni.upx2px(490), uni.upx2px(490));
								
								resolve()
							},
							fail: (res) => {
								console.log(res);
								uni.hideLoading();
							}
						});	
					});
				}
				var line = function(){
					return new Promise((resolve, reject)=> {
						_this.canvas.beginPath()
						_this.canvas.moveTo(uni.upx2px(30), uni.upx2px(666))
						_this.canvas.lineTo(uni.upx2px(330), uni.upx2px(666))
						_this.canvas.setStrokeStyle('#eeeeee');
						_this.canvas.stroke()
		
						resolve()
					});
				}
				var goodsName = function(){
					return new Promise((resolve, reject)=> {
						_this.canvas.setFillStyle('#333333');
						_this.canvas.font = '11px Roboto-Regular';
						_this.canvasWraptitleText(_this.canvas, _this.poster.goods_name, uni.upx2px(30), uni.upx2px(715), uni.upx2px(400), uni.upx2px(45), 1);
								
						resolve()
					});
				}
				var brandName = function(){
					return new Promise((resolve, reject)=> {
						_this.canvas.setFillStyle('#5b54b6');
						_this.canvas.font = '10px Roboto-Regular';
						_this.canvasWraptitleText(_this.canvas, _this.poster.brand, uni.upx2px(30), uni.upx2px(765), uni.upx2px(500), uni.upx2px(45), 1);
								
						resolve()
					});
				}
				var price = function(){
					return new Promise((resolve, reject)=> {
						_this.canvas.setFillStyle('#002242');
						_this.canvas.font = 'bold 15px Roboto-Regular';
						_this.canvas.setTextAlign('left');
						_this.canvas.fillText('￥'+_this.poster.price, uni.upx2px(30), uni.upx2px(812)); 
						
						if(_this.poster.market_price > 0){
							_this.canvas.setFillStyle('#888888');
							_this.canvas.font = '13px Roboto-Regular';
							_this.canvas.setTextAlign('left');
							_this.canvas.fillText('￥'+_this.poster.market_price, uni.upx2px(220), uni.upx2px(812)); 
							
							_this.canvas.beginPath()
							_this.canvas.moveTo(uni.upx2px(200), uni.upx2px(807))
							_this.canvas.lineTo(uni.upx2px(350), uni.upx2px(807))
							_this.canvas.setStrokeStyle('#888888');
							_this.canvas.stroke()
						}
						
						resolve()
					});
				}
				var wxcode = function(){
					return new Promise((resolve, reject)=> {
						uni.downloadFile({
							url: _this.poster.wxcode,
							success: (res) => {
								_this.canvas.drawImage(res.tempFilePath, uni.upx2px(409), uni.upx2px(675), uni.upx2px(100), uni.upx2px(100));
								
								resolve()
							},
							fail: (res) => {
								console.log(res);
								uni.hideLoading();
							}
						});	
					});
				}
				var wxtip = function(){
					return new Promise((resolve, reject)=> {
						_this.canvas.setFillStyle('#888888');
						_this.canvas.font = '8px Roboto-Regular';
						_this.canvas.setTextAlign('left');
						_this.canvas.fillText(_this.poster.wxtip, uni.upx2px(400), uni.upx2px(810)); 
						
						resolve()
					});
				}
				await avatar();
				await nickname();
				await tip();
				await cover();
				await line();
				await goodsName();
				await brandName();
				await price();
				await wxcode();
				await wxtip();
				this.loadShow = false;
				this.makePoster();
			},
			
			makePoster(){
				var _this = this;
				this.canvas.draw(false, setTimeout(() => {
					setTimeout(() => {
						// #ifndef MP-ALIPAY
						uni.canvasToTempFilePath({
							x: 0,
							y: 0,
							width: Number(this.width),
							height: Number(this.height),
							fileType: 'jpg',
							canvasId: 'poster-canvas',
							success: (res) => {
								console.log(res);
								_this.img = res.tempFilePath;
							},
							fail: (res) => {
								console.log(res);
							},
							complete: (res) => {
								console.log(res);
								uni.hideLoading();
							}
						}, this);
						// #endif
						// #ifdef MP-ALIPAY
						// 支付宝的
						// #endif
					}, 500);
				}));
			},
			
			canvasWraptitleText(canvas, text, x, y, maxWidth, lineHeight, maxRowNum) {
				if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
					return;
				}
				// canvas.font = '20px Bold PingFang SC'; //绘制文字的字号和大小
				// 字符分隔为数组
				var arrText = text.split('');
				var line = '';
				var rowNum = 1
				for (var n = 0; n < arrText.length; n++) {
					var testLine = line + arrText[n];
					var metrics = canvas.measureText(testLine);
					var testWidth = metrics.width;
					if (testWidth > maxWidth && n > 0) {
						if (rowNum >= maxRowNum) {
							var arrLine = testLine.split('')
							arrLine.splice(-9)
							var newTestLine = arrLine.join("")
							newTestLine += "..."
							canvas.fillText(newTestLine, x, y);
							//如果需要在省略号后面添加其他的东西，就在这个位置写（列如添加扫码查看详情字样）
							//canvas.fillStyle = '#2259CA';
							//canvas.fillText('扫码查看详情',x + maxWidth-90, y);
							return
						}
						canvas.fillText(line, x, y);
						line = arrText[n];
						y += lineHeight;
						rowNum += 1
					} else {
						line = testLine;
					}
				}
				
				canvas.fillText(line, x, y);
			},
			handleSavePoster(){
				var _this = this;
				uni.saveImageToPhotosAlbum({
					filePath: _this.img,
					success: function () {
						_this.$com.alert('下载成功');
					},
					fail:function(){
						_this.$com.alert('下载失败');
					},
				});
			},
			closePosterImage(){
				this.$emit('closePosterImage')
			}
		},
	}
</script>

<style>
/* .poster-box{position: fixed;top:50%;transform:translateY(-50%) scale(0.5);z-index:66;width:1100rpx;left:-175rpx;}
.poster-canvas{width:1100rpx;height:1700rpx;background:#fff;z-index:67;}
.poster-save{width:1100rpx;background:#002242;color:#fff;font-size:56rpx;z-index:67;margin:50rpx 0 0;
line-height:160rpx;height:160rpx;text-align: center;border-radius:16rpx;}
 */
.poster-box{position: fixed;top:50%;transform:translateY(-50%);z-index:66;width:550rpx;left:100rpx;}
.poster-canvas{width:550rpx;height:850rpx;background:#fff;z-index:67;}
.poster-save{width:550rpx;background:#002242;color:#fff;font-size:28rpx;z-index:67;margin:26rpx 0 0;
line-height:80rpx;height:80rpx;text-align: center;border-radius:16rpx;}

.load{width: 60rpx;height: 60rpx;margin-top: calc((850rpx - 60rpx) / 2);margin-left: calc((550rpx - 60rpx) / 2);}
</style>